pre
  position: relative
.hljs
  margin: 0 - $gap !important
  padding: $gap !important
  -webkit-font-smoothing: auto
  -moz-osx-font-smoothing: auto
  scrollbar()
  if hexo-config('custom_css.body.highlight.language') == true
    &:before
      position: absolute
      top: 0
      right: 0
      color: var(--color-meta)
      font-size: 13px
      padding: 4px 8px
    &.md:before,&.markdown:before
      content: "md"
    &.yaml:before
      content: "YAML"
    &.json:before
      content: "JSON"

    &.html:before
      content: "HTML"
    &.js:before,&.javascript:before
      content: "JS"
    &.css:before
      content: "CSS"
    &.less:before
      content: "Less"
    &.stylus:before
      content: "Stylus"

    &.bash:before
      content: "bash"
    &.shell:before
      content: "shell"
    &.sh:before
      content: "sh"
    &.ini:before
      content: "ini"

    &.c:before
      content: "C"
    &.cpp:before
      content: "C++"
    &.objc:before,&.objectivec:before
      content: "Objective-C"
    &.swift:before
      content: "Swift"

    &.java:before
      content: "Java"
    &.python:before
      content: "Python"
    &.php:before
      content: "PHP"
    &.rust:before
      content: "Rust"
    &.sql:before
      content: "SQL"
    &.ruby:before
      content: "Ruby"
    &.makefile:before
      content: "Makefile"
    &.go:before
      content: "Go"
    &.typescript:before
      content: "TypeScript"

.highlight
  position: relative
  width: 100%
  margin: $gap-p 0
  display: block
  background: var(--color-block)
  font-size: $fontsize-code
  font-family: $fontfamily-code
  border-radius: $border-codeblock
  // border: 1px solid transparent
  line-height: 1.5
  -webkit-font-smoothing: auto
  -moz-osx-font-smoothing: auto
  overflow: hidden
  trans()
  if hexo-config('custom_css.body.highlight.grayscale') == true
    filter: grayscale(100%)
  &:hover
    background: var(--color-codeblock)
    if hexo-config('custom_css.body.highlight.grayscale') == true
      filter: grayscale(0%)
    figcaption
      trans()
      background: darken($color-codeblock, 5%)
    .gutter
      background: darken($color-codeblock, 5)
  figcaption
    font-size: 13px
    position: sticky
    left: 0
    padding: $gap * 0.25 $gap * 0.5 $gap * 0.25 $gap * 0.5
    background: darken($color-block, 5%)
    border-top-left-radius: "calc(%s - 1px)" % $border-codeblock
    border-top-right-radius: "calc(%s - 1px)" % $border-codeblock

  >table
    overflow: auto
    display: block
    scrollbar-codeblock()
    td,th
      padding: 0
      border: none
      line-height: 1.5
    margin: 0
    background-color: transparent
    border: none
    tr
      background-color: transparent
      &:hover
        background-color: transparent


    .gutter
      disable-user-select()
      padding: 0 12px
      text-align: right
      border-width: 0
      margin-left: 0
      position: sticky
      left: 0
      z-index: 1
      background: darken($color-block, 5)
      pre
        color: var(--color-meta)


    pre
      background: transparent
      margin: 0
      padding: 0
      border: none
      .code:before
        display: none

    .code
      padding: $gap * 1.25 $gap
      vertical-align: top
      background-color: transparent
      &:before
        content: ""
        position: absolute
        top: 0
        right: 0
        color: var(--color-meta)
        font-size: 13px
        padding: 4px 8px

  if hexo-config('custom_css.body.highlight.language') == true
    &.md .code:before,&.markdown .code:before
      content: "md"
    &.yaml .code:before
      content: "YAML"
    &.json .code:before
      content: "JSON"

    &.diff .code:before
      content: "diff"

    &.html .code:before
      content: "HTML"
    &.js .code:before,&.javascript .code:before
      content: "JS"
    &.css .code:before
      content: "CSS"
    &.less .code:before
      content: "Less"
    &.stylus .code:before
      content: "Stylus"

    &.bash .code:before
      content: "bash"
    &.shell .code:before
      content: "shell"
    &.sh .code:before
      content: "sh"
    &.ini .code:before
      content: "ini"

    &.c .code:before
      content: "C"
    &.cpp .code:before
      content: "C++"
    &.objc .code:before,&.objectivec .code:before
      content: "Objective-C"
    &.swift .code:before
      content: "Swift"

    &.java .code:before
      content: "Java"
    &.python .code:before
      content: "Python"
    &.php .code:before
      content: "PHP"
    &.rust .code:before
      content: "Rust"
    &.sql .code:before
      content: "SQL"
    &.ruby .code:before
      content: "Ruby"
    &.makefile .code:before
      content: "Makefile"
    &.go .code:before
      content: "Go"
    &.typescript .code:before
      content: "TypeScript"




$hl-keyword = #9c27b0
$hl-blue = #1E80F0
$hl-cyan = #17AFCA
$hl-green = #3FA33F
$hl-light-blue = #6ECDF9
$hl-red = #EE2B29
$hl-orange = #FB3F1B
$hl-amber = #FD8607
$hl-text = alpha($color-text, .9)
.highlight pre
  // 行
  .line,.params
    color: $hl-text

  .line .addition
    color: $hl-green
  .line .deletion
    color: $hl-red

  .marked
    background-color: alpha(#FED542, .4)
    padding: 2px 8px 2px 0
    border-radius: 2px
    width: 100%

  .title, .attr, .attribute
    color: $color-md-indigo

  // 注释
  .comment
    color: alpha($color-p, .5)

  .keyword, .meta-keyword, .javascript .function
    color: $hl-keyword

  .type, .built_in, .tag .name
    color: $color-md-light-blue

  .variable, .regexp, .ruby .constant, .xml .tag .title, .xml .pi, .xml .doctype, .html .doctype, .css .id, .css .class, .css .pseudo
    color: $hl-amber

  .number, .preprocessor, .literal, .constant
    color: $hl-amber

  .class, .ruby .class .title, .css .rules .attribute
    color: $color-md-orange

  .string, .meta-string
    color: darken($color-md-green, 10%)

  .value, .inheritance, .header, .ruby .symbol, .xml .cdata
    color: $color-md-green

  .css .hexcolor
    color: #66cccc

  .function, .python .decorator, .python .title, .ruby .function .title, .ruby .title .keyword, .perl .sub, .javascript .title, .coffeescript .title
    color: #6699cc


.highlight.html,.highlight.css,.highlight.less,.highlight.stylus
  .line
    .tag .name, .selector-tag
      color: $hl-red
    .selector-class, .selector-attr
      color: $hl-amber
    .attribute
      color: $color-md-indigo
    .number
      color: $hl-cyan


.highlight.objc,.highlight.objectivec,.highlight.swift,.highlight.c
  .line
    .meta
      color: $hl-keyword
    .meta-string,.string
      color: $hl-orange
    .class
      color: $hl-text
      .title
        color: $hl-blue
    .comment
      color: $hl-green

.highlight.json
  .line
    .attr
      color: #E24F5A
    .literal
      color: $color-md-indigo

.highlight.yaml
  .line
    .attr
      color: #E24F5A
